<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:fn="http://java.sun.com/jsp/jstl/functions" lang="en">



<h:head>
	<title>Solicitud PQR</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<link REL="SHORTCUT ICON"
		href="#{facesContext.externalContext.request.scheme}://#{facesContext.externalContext.request.serverName}:#{facesContext.externalContext.request.serverPort}#{facesContext.externalContext.request.contextPath}/images/logoTcBuen.ico" />
</h:head>
<h:body>

	<div id="logo" align="center">
		<h:form id="myForm" enctype="multipart/form-data">


			<p:growl id="messages" showDetail="false" />

			<p:wizard flowListener="#{wizardPruebaView.onFlowProcess}"
				nextLabel="Siguiente" backLabel="Atrás">
				<p:tab id="personal" title="Personal">
					<p:panel header="Información  Personal">
						<p:messages />
						<h:panelGrid columns="2" columnClasses="label, value">

							<h:outputText id="msgNombreEmpresa"
								value=" Nombre Empresa: (opcional) " />
							<p:inputText id="txtNombreEmpresa"
								binding="#{wizardPruebaView.txtNombreEmpresa}" maxlength="70" />


							<h:outputText id="msgIdTpDoc_TipoDocumento"
								value="* Tipo de Documento:" />
							<p:selectOneMenu id="cmbTipoDoc"
								value="#{wizardPruebaView.idtipodo_idTipoDocumento}"
								binding="#{wizardPruebaView.txtIdTpDoc_TipoDocumento}"
								required="true"
								requiredMessage="El Tipo de Identificación es requerido ">
								<f:selectItem itemLabel="Seleccione una opcion" itemValue="" />
								<f:selectItems value="#{wizardPruebaView.id_tipoDocumento}" />
							</p:selectOneMenu>

							<h:outputText id="msgNumeroIdentificacion"
								value="* Número de Identificación:" />
							<p:inputText id="txtNumeroIdentificacion"
								binding="#{wizardPruebaView.txtNumeroIdentificacion}"
								required="true" requiredMessage="La Identificación es requerida"
								maxlength="15">
								<p:tooltip id="toolTipFocus" for="txtNumeroIdentificacion"
									showEvent="focus" hideEvent="blur"
									value="Digite numero de identificacion sin puntos ni comas." />
							</p:inputText>

							<h:outputText id="msgNombreContacto"
								value="* Nombre del Contacto" />
							<p:inputText id="txtNombreContacto"
								binding="#{wizardPruebaView.txtNombreContacto}" required="true"
								requiredMessage="El Nombre del contacto es requerido "
								maxlength="100" />

							<h:outputText id="msgCorreoElectronico" value="* Correo:" />
							<p:inputText id="txtCorreoElectronico"
								binding="#{wizardPruebaView.txtCorreoElectronico}"
								required="true" requiredMessage="El Email es requerido"
								maxlength="60" validatorMessage="Ingrese un Email Valido">
								<f:validateRegex
									pattern="^[_A-Za-z0-9-\+]+(\.[_A-Za-z0-9-]+)*@[A-Za-z0-9-]+(\.[A-Za-z0-9]+)*(\.[A-Za-z]{2,})$" />
								<p:tooltip id="toolTipFocus2" for="txtCorreoElectronico"
									value="Correo donde responderemos tu caso" showEvent="focus"
									hideEvent="blur" />
								<p:watermark for="txtCorreoElectronico"
									value="ejemplo@gmail.com" id="watermark" />
							</p:inputText>

							<h:outputText id="msgTelefonoFijo" value=" Teléfono Fijo:" />
							<p:inputMask id="txtTelefonoFijo"
								binding="#{wizardPruebaView.txtTelefonoFijo}"
								mask="(999) 999-9999">
								<p:tooltip id="toolTipFocus3" for="txtTelefonoFijo"
									showEvent="focus" hideEvent="blur"
									value="Formato Area + Numero Fijo ej: 032 333 3333" />
							</p:inputMask>


							<h:outputText id="msgNumeroCelular" value=" Número Celular:" />
							<p:inputMask id="txtNumeroCelular"
								binding="#{wizardPruebaView.txtNumeroCelular}"
								mask="(999) 999-9999" />
						</h:panelGrid>
					</p:panel>
				</p:tab>

				<p:tab id="address" title="Instructivo">
					<p:panel header="Lea las Instrucciones">
						<h:outputText
							value="Bienvenido a nuestro sistema PQR(Peticiones, Quejas y Reclamos). Actualmente manejamos 2 tipos de PQR (1-Faltante o Avería 2-Solicitudes o Reclamos). A continuación están las instrucciones para diligenciar cada tipo de PQR que manejamos, 
							una vez que hayas leído las instrucciones y hayas decidido cual escoger debes dar click en Siguiente para continuar: "
							style="font-weight:bold" />
						<p:messages />
						<h:panelGrid columns="1" columnClasses="label, value"
							style="width: 1000px; height: 269px; ">
							<h:outputText value="Faltante o Averia: "
								style="font-weight:bold" />
							<p:inputTextarea readonly="true"
								value="#{wizardPruebaView.txtFaltante.value}" autoResize="false"
								rows="4" cols="100" />

							<p:column colspan="7">Los Anexos Obligatorios para este PQR son:</p:column>
							<p:dataTable value="#{wizardPruebaView.anexosFaltante}"
								var="anexoDTO" id="tableFaltante">
								<p:column>
									<h:outputText value="#{anexoDTO.nombreAnexo}" />
								</p:column>
							</p:dataTable>

							<p:separator />

							<h:outputText value="Solicitud o Reclamacion: "
								style="font-weight:bold" />
							<p:inputTextarea readonly="true"
								value="#{wizardPruebaView.txtReclamo.value}" autoResize="false"
								rows="4" cols="100" />

							<p:column colspan="7">Los Anexos Obligatorios para este PQR son:</p:column>
							<p:dataTable value="#{wizardPruebaView.anexosSolicitudes}"
								var="anexoDTO" id="tableSolicitudes">
								<p:column>
									<h:outputText value="#{anexoDTO.nombreAnexo}" />
								</p:column>
							</p:dataTable>

						</h:panelGrid>
					</p:panel>
				</p:tab>

				<p:tab id="contact" title="Tipo de PQR">
					<p:panel header="Seleccione un Tipo de PQR">
						<p:messages />
						<h:panelGrid columns="2" columnClasses="label, value"
							cellpadding="10">
							<p:selectOneRadio id="console"
								value="#{wizardPruebaView.console}" required="true"
								requiredMessage="Seleccione 1 Tipo de PQR"
								style="font-weight:bold">
								<f:selectItems value="#{wizardPruebaView.id_TipoPQR}" />
							</p:selectOneRadio>
						</h:panelGrid>
					</p:panel>
				</p:tab>

				<p:tab id="confirm" title="Confirmación">
					<p:panel id="panel" header="Solicitud a Realizar">

						<h:panelGrid id="confirmation" columns="2"
							columnClasses="grid,grid,grid" cellspacing="10">
							<f:facet name="header">
								<p:row>
									<p:column colspan="7">
										<p:outputLabel value="#{wizardPruebaView.titulo}"
											style="font-size:24px"></p:outputLabel>
									</p:column>
								</p:row>
							</f:facet>

							<h:panelGrid columns="2" columnClasses="label, value"
								cellspacing="8">

								<h:outputText value="Fecha: " style="font-weight:bold" />
								<h:outputText value="#{wizardPruebaView.date}"
									styleClass="outputLabel" />

								<h:outputText value="Nombre del Contacto: "
									style="font-weight:bold" />
								<h:outputText
									value="#{wizardPruebaView.solicitanteDTO.nombreContacto.toString()}"
									styleClass="outputLabel" />

								<h:outputText value="Numero de Identificación: "
									style="font-weight:bold" />
								<h:outputText
									value="#{wizardPruebaView.solicitanteDTO.numeroIdentificacion}"
									styleClass="outputLabel" />
							</h:panelGrid>

							<h:panelGrid columns="2" columnClasses="label, value"
								cellspacing="8">
								<h:outputText value="Correo Electrónico: "
									style="font-weight:bold" />
								<h:outputText
									value="#{wizardPruebaView.solicitanteDTO.correoElectronico}"
									styleClass="outputLabel" />

								<h:outputText value="Nombre de la Empresa: "
									style="font-weight:bold" />
								<h:outputText
									value="#{wizardPruebaView.solicitanteDTO.nombreEmpresa}"
									styleClass="outputLabel" />

								<h:outputText value="Teléfono: " style="font-weight:bold" />
								<h:outputText
									value="#{wizardPruebaView.solicitanteDTO.telefonoFijo}"
									styleClass="outputLabel" />
							</h:panelGrid>

						</h:panelGrid>
						<p />
						<p:separator />

						<h:panelGrid columns="2" cellpadding="5" title="Seleccione">
							<f:facet name="header">
								<p:row>
									<p:column colspan="7">Seleccione Sus Motivos de Reclamación y de Solicitud</p:column>
								</p:row>
							</f:facet>
							<h:outputText value="Motivo de Reclamación:"
								style="font-weight:bold" />

							<p:selectManyCheckbox id="grid" layout="grid" columns="3"
								value="#{wizardPruebaView.selectedReclamos}" required="true"
								requiredMessage="Seleccione al menos 1 Motivo de Reclamacion">

								<f:selectItems value="#{wizardPruebaView.reclamos}"
									var="MotReclXTpSolDTO"
									itemLabel="#{MotReclXTpSolDTO.nombreMotivo}"
									itemValue="#{MotReclXTpSolDTO.idMotRecl_MotivoReclamacion}" />
							</p:selectManyCheckbox>

							<h:outputText value="Motivo de Solicitud:"
								style="font-weight:bold" />

							<p:selectManyCheckbox id="grid2" layout="grid" columns="3"
								value="#{wizardPruebaView.selectedSolicitud}" required="true"
								requiredMessage="Seleccione al menos 1 Motivo de Solicitud">

								<f:selectItems value="#{wizardPruebaView.solicitudes}"
									var="MotSolXTpSolDTO"
									itemLabel="#{MotSolXTpSolDTO.nombreMotivoSolicitud}"
									itemValue="#{MotSolXTpSolDTO.idMotSol_MotivoSolicitud}" />
							</p:selectManyCheckbox>
						</h:panelGrid>

						<p />
						<p:separator />
						<h:panelGrid id="Descripcion" columns="1" style="width: 249px; "
							cellpadding="5">
							<f:facet name="header">
								<p:row>
									<p:column colspan="7">Breve Descripción del Caso</p:column>
								</p:row>
							</f:facet>
							<p:column colspan="4">Explique detalladamente su caso</p:column>
							<div align="center">
								<p:inputTextarea maxlength="400" rows="20" cols="70"
									style="height: 100px; overflow:auto;"
									value="#{wizardPruebaView.descripcion}" required="true"
									requiredMessage="Por favor, expliquenos su caso"
									binding="#{wizardPruebaView.textArea}">
								</p:inputTextarea>
							</div>
						</h:panelGrid>
						<p:separator />

						<h:panelGrid id="anexosPanel" cellpadding="5">
							<f:facet name="header">
								<p:row>
									<p:column colspan="7">Los Anexos Obligatorios para este PQR son:</p:column>
								</p:row>
							</f:facet>

							<p:column colspan="4">Recuerde que los Tipos de archivo permitidos son (JPG, JPEG, PNG, PDF, XPS)</p:column>

							<p:dataTable value="#{wizardPruebaView.anexos}" var="anexoDTO"
								id="table">
								<p:column headerText="Nombre Anexo">
									<h:outputText value="#{anexoDTO.nombreAnexo}" />
								</p:column>

								<p:column headerText="Archivo">
									<p:fileUpload id="upload" required="true"
										requiredMessage="Adjunte el archivo solicitado"
										fileUploadListener="#{wizardPruebaView.handleFileUpload}"
										cancelLabel="Cancelar" uploadLabel="Adjuntar"
										label="Seleccionar" mode="advanced" dragDropSupport="false"
										sizeLimit="10000000" fileLimit="1" update="messages, check"
										allowTypes="/(\.|\/)(gif|jpe?g|png|pdf|xps)$/"
										invalidSizeMessage="Archivo muy pesado"
										fileLimitMessage="Maximo 1 Archivo"
										invalidFileMessage="Formato no Compatible" />

									<p:growl id="messages" for="upload" autoUpdate="true" />
								</p:column>

								<p:column headerText="Adjuntado?">
									<p:selectBooleanCheckbox id="check" disabled="true"
										binding="#{wizardPruebaView.check}" />
								</p:column>
							</p:dataTable>
						</h:panelGrid>

						<p:commandButton id="btnSave" value="Enviar Solicitud"
							action="#{wizardPruebaView.crearTodo}"
							binding="#{wizardPruebaView.btnSave}" icon="ui-icon-disk"
							update="messages,panel,anexosPanel, myForm" />

						<p:commandButton id="btnLimpiar" value="Limpiar"
							action="#{wizardPruebaView.limpiar}"
							binding="#{wizardPruebaView.btnLimpiar}" icon="ui-icon-disk"
							update="panel, anexosPanel, myForm, table" />
					</p:panel>

				</p:tab>
			</p:wizard>

		</h:form>
	</div>
</h:body>
</html>
